<template>
	<div class="contact-container">
		<div class="item">
			<a href="https://github.com/ks3356143?tab=repositories" target="_blank">
				<Icon type="github"></Icon>
				<span>{{ data.githubName }}</span>
			</a>
		</div>
		<div class="item">
			<a :href="`mailto:${data.mail}`">
				<Icon type="email"></Icon>
				<span>{{ data.mail }}</span>
			</a>
		</div>
		<div class="item">
			<a
				:href="`tencent://message/?Menu=yes&uin=${data.qq}&Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45`"
			>
				<Icon type="qq"></Icon>
				<span>{{ data.qq }}</span>
				<div class="bubble">
					<img :src="qqImg" alt="" />
				</div>
			</a>
		</div>
		<div class="item">
			<a href="" @click.prevent>
				<Icon type="weixin"></Icon>
				<span>{{ data.weixin }}</span>
				<div class="bubble">
					<img :src="weixinImg" alt="" />
				</div>
			</a>
		</div>
	</div>
</template>

<script>
/* 该组件需要横向撑满容器，且背景颜色透明 */
import Icon from '@/components/Icon'
// QQ和微信的弹出
import qqImg from '@/assets/imgs/qq.png'
import weixinImg from '@/assets/imgs/weixin.png'
import { mapState } from 'vuex'
export default {
	name: 'Contact',
	components: {
		Icon,
	},
	data() {
		return {
			githubText: 'github',
			mailText: '314298729@qq.com',
			qqText: '314298729',
			weixinText: 'ks3356143',
			// 图片数据
			qqImg: qqImg,
			weixinImg: weixinImg,
		}
	},
	computed: {
		...mapState('setting', ['data']),
	},
}
</script>

<style lang="less" scoped>
@import '~@/styles/basic/var.less';
.contact-container {
	width: 100%;
	padding: 5px;
	background-color: transparent;
	font-size: 14px;
	i {
		font-size: 20px;
	}
	& > .item {
		display: flex;
		flex-direction: column;
		height: 30px;
		justify-content: center;
		& > a {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			gap: 8px;
			width: 0px;
			position: relative;
			color: @gray;
			& > .bubble {
				width: 200px;
				height: 200px;
				padding: 20px;
				position: absolute;
				left: 10px;
				bottom: 30px;
				background-color: white;
				transition: transform 0.3s;
				transform: scaleY(0);
				transform-origin: bottom;
				border-radius: 10px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			&:hover {
				.bubble {
					transform: scaleY(1);
				}
				& > .bubble::after {
					content: '';
					display: block;
					width: 10px;
					height: 10px;
					bottom: -5px;
					left: 50%;
					background-color: white;
					position: absolute;
					transform: translateX(-50%) rotate(45deg);
				}
			}
		}
		& > a:hover {
			color: @primary;
		}
	}
}
</style>
